﻿@using xConnected.Common.ExpertProfile
<div data-bind="with: profile">
    <div class="row" data-bind="with: profileAdvancedSearch">
        <div class="span2">
            <small>@Resources.ProfilesPerPage:</small>
            <select class="input-mini" data-bind="options: $root.pageSizeChoicesProfiles, value: $root.profile.pageSize"></select>
        </div>
        <div class="pagination" align="right" style="margin-top: 0px">
            <ul>
                <li>
                    <a title="First Page" href="#" data-bind="click: function() { $root.profile.firstPage(); }">|←</a>
                </li>
                <li>
                    <a title="Previous Page" href="#" data-bind="click: function () { $root.profile.previousPage(); }">←</a>
                </li>
                <!-- ko foreach: ko.utils.range(0, $root.profile.pagesCount()-1) -->
                <li data-bind="css: { 'active': $data == $root.profile.profileAdvancedSearch().PageIndex() }">
                    <a href="#" data-bind="text: ($data + 1), click: function() { $root.profile.pageNumber($data) }">
                    </a>
                </li>
                <!-- /ko -->
                <li>
                    <a title="Next Page" href="#" data-bind="click: function() { $root.profile.nextPage(); }"> →</a>
                </li>
                <li>
                    <a title="Last Page" href="#" data-bind="click: function() { $root.profile.lastPage(); }"> →|</a>
                </li>
            </ul>
        </div>
    </div>
</div>